<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
    <link rel="stylesheet" href="./css/users.css">
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<form method="get" action="#" id="userForm">
    输入关键词：<input type="text" name="userName" id="userName" placeholder="用户名关键字">
    <button type="button" class="queryBtn" style="color: white; background-color: #1d85eb">查询</button>
    <button id="closeBatch" style="color: white; background-color: #0185e4">冻结勾选用户</button>
    <button class="button1" id="deleteBatch">注销勾选用户</button>

</form>
<table border="1" cellspacing="0" align="center" class="con-b">
    <h2>用户列表：</h2>
    <thead>
    <tr class="row">
        <td><input type="checkbox" id="j_cbAll">全选</td>
        <td>用户编号</td>
        <td>用户名</td>
        <td>密码</td>
        <td>用户状态</td>
        <td>冻结用户</td>
        <td>注销用户</td>
    </tr>
    </thead>
    <tbody id="j_tb">

    </tbody>

    <tbody id="tfoot">

    </tbody>
</table>
<script>

    function loadWithPage(currentPage,pageSize){
        $.ajax({
            type: "get",
            url:"user/loadWithPage.do?currentPage="+currentPage+"&pageSize="+pageSize,
            dataType: "json",
            success:function (result){
                console.info(result);
                $("#j_tb").empty();
                $("#tfoot").empty();
                $(result.list).each(function (index,item){
                    var $trs =
                        `<tr>
                            <td><input type="checkbox"  name="ck" id="ck" value="`+item.userId+`"></td>
                            <td className="lf">`+item.userId+`</td>
                            <td><a href="">`+item.userName+`</a></td>
                            <td className="lf">`+item.userPassword+`</td>
                            <td className="lf">`+item.userState+`</td>
                            <td><button class="backBtn" type="submit" style="color: white; background-color: #7ae69d">恢复</button>&nbsp;&nbsp;&nbsp;&nbsp;<button class="closeBtn" type="submit" style="color: white; background-color: #0185e4">冻结</button></td>
                            <td><button class="deleteBtn" type="submit" style="color: white; background-color: #ef5050">注销</button></td>
                        </tr>`;
                    $("#j_tb").append($trs);
                });
                var pageInfo = `
                    <tr>
                        <td colspan="7">
                            <span>共有`+result.pages+`页，当前是第`+result.pageNum+`页</span>&nbsp;&nbsp;
                            <a href="javasrcipt:void(0)" onclick="firstPage()">首页</a>
                            <a href="javasrcipt:void(0)" onclick=prePage(`+result.prePage+`)">上一页</a>
                            <a href="javasrcipt:void(0)" onclick=nextPage(`+result.nextPage+`,`+result.pages+`)">下一页</a>
                            <a href="javasrcipt:void(0)" onclick=tailPage(`+result.pages+`)">尾页</a>
                        </td>
                    </tr>`;
                $("#tfoot").append(pageInfo);
            }
        })
    }


    $(function (){
        loadWithPage(1,5);
        // findAllUsers();
    });


    $(".queryBtn").click(function (){
        var data = $("#userName").serialize();
        $.get("user/findByUname.do?"+data,function (result){
            console.info(result);
            $("#j_tb").empty();
            $("#tfoot").empty();
            $(result).each(function (index,item){
                var $trs =
                    `<tr>
                            <td><input type="checkbox"  name="ck" id="ck" value="`+item.userId+`"></td>
                            <td className="lf">`+item.userId+`</td>
                            <td><a href="">`+item.userName+`</a></td>
                            <td className="lf">`+item.userPassword+`</td>
                            <td className="lf">`+item.userState+`</td>
                            <td><button class="backBtn" type="submit" style="color: white; background-color: #7ae69d">恢复</button>&nbsp;&nbsp;&nbsp;&nbsp;<button class="closeBtn" type="submit" style="color: white; background-color: #01a0e4">冻结</button></td>
                            <td><button class="deleteBtn" type="submit" style="color: white; background-color: #ef5050">注销</button></td>
                        </tr>`;
                $("#j_tb").append($trs);
            });
            var pageInfo = `
                    <tr>
                        <td colspan="7">
                            <span>共有`+result.pages+`页，当前是第`+result.pageNum+`页</span>&nbsp;&nbsp;
                            <a href="javasrcipt:void(0)" onclick="firstPage()">首页</a>
                            <a href="javasrcipt:void(0)" onclick=prePage(`+result.prePage+`)">上一页</a>
                            <a href="javasrcipt:void(0)" onclick=nextPage(`+result.nextPage+`,`+result.pages+`)">下一页</a>
                            <a href="javasrcipt:void(0)" onclick=tailPage(`+result.pages+`)">尾页</a>
                        </td>
                    </tr>`;
            $("#tfoot").append(pageInfo);
        });
    })



    $(document).on("click",".backBtn",function (result){
        var flag = window.confirm("您确定要恢复该用户吗？...");
        if(flag){
            var userId =  $(this).parents("tr").children().eq(1).text();
            $.get("user/backByUid.do?userId="+userId,function (result){
                console.info(result);
                if(result.msg){
                    alert(result.msg);
                    window.location.reload();
                }
                else {
                    alert(result.error);
                }
            });
        }
    });

    $(document).on("click",".closeBtn",function (result){
        var flag = window.confirm("您确定要冻结该用户吗？...");
        if(flag){
            var userId =  $(this).parents("tr").children().eq(1).text();
            $.get("user/closeByUid.do?userId="+userId,function (result){
                console.info(result);
                if(result.msg){
                    alert(result.msg);
                    window.location.reload();
                }
                else {
                    alert(result.error);
                }
            });
        }
    });

    $(document).on("click",".deleteBtn",function (result){
        var flag = window.confirm("您确定要注销该用户吗？...");
        if(flag){
            var userId =  $(this).parents("tr").children().eq(1).text();
            $.get("user/deleteByUid.do?userId="+userId,function (result){
                console.info(result);
                if(result.msg){
                    alert(result.msg);
                    window.location.reload();
                }
                else {
                    alert(result.error);
                }
            });
        }
    });



    $("#closeBatch").click(closeBatch);

    function closeBatch(){
        var zhi = $("input[name=ck]:checked");
        var str="";
        var id = "";
        if(zhi.length==0){
            alert("请选择要冻结的用户");
        }else {
            if(confirm("您确定冻结选择的"+zhi.length+"名用户吗？")){
                $.each(zhi,function (index,item){
                    id=$(item).val();
                    if(id!=null)
                        str+=id+",";

                });
                $.ajax({
                    url: 'user/closeBatch.do',
                    data:{"userIds":str},
                    dataType: "json",
                    type: "get",
                    success:function (msg){
                        window.location.reload();
                    }
                });
            }
        }
    }

    $("#deleteBatch").click(deleteBatch);

    function deleteBatch(){
        var zhi = $("input[name=ck]:checked");
        var str="";
        var id = "";
        if(zhi.length==0){
            alert("请选择要注销的用户");
        }else {
            if(confirm("您确定注销选择的"+zhi.length+"名用户吗？")){
                $.each(zhi,function (index,item){
                    id=$(item).val();
                    if(id!=null)
                        str+=id+",";

                });
                $.ajax({
                   url: 'user/deleteBatch.do',
                    data:{"userIds":str},
                    dataType: "json",
                    type: "get",
                    success:function (msg){
                        window.location.reload();
                    }
                });
            }
        }
    }





    // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
    // 获取元素
    var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
    var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
    // 注册事件
    j_cbAll.onclick = function () {
        // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
        console.log(this.checked);
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].checked = this.checked;
        }
    }
    // 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
    for (var i = 0; i < j_tbs.length; i++) {
        j_tbs[i].onclick = function () {
            // flag 控制全选按钮是否选中
            var flag = true;
            // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
            for (var i = 0; i < j_tbs.length; i++) {
                if (!j_tbs[i].checked) {
                    flag = false;
                    break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
                }
            }
            j_cbAll.checked = flag;
        }
    }

</script>
</body>
</html>
